<template>
    <div class="wrap">
        <div class="title">{{title}}</div>
        <piechart2 :chartData="pieData" v-if="pieData.length > 0"/>
    </div>
</template>

<script>
import piechart2 from "./piechart2.vue";
export default {
    components: {  piechart2 },
    data () {
        return {
            timer: null,
            pieData: []
        }
    },
    props: {
        title: {
            type: String,
            default: '事件严重性等级分布图'
        },
        DataList: {
            type: Array,
            default: []
        }
        
    },
    watch:{
        DataList(){
            this.getData()
        }
    },
    created(){
    },
    mounted(){
        this.getData()
    },
    methods:{
        async getData(){
            this.$nextTick(() => {
                let arr = []
                this.DataList.map( item =>{
                    arr.push({name: item.Name, value: item.Count})
                })
                this.pieData = arr
            })
        }
    },
    beforeDestroy(){
        this.$once('hook:beforeDestroy',() =>{
            clearInterval(this.timer)
        })
    }
    
}
</script>
<style scoped>

.echarts_tip{
	position:absolute;
	border-radius:5px;
	background:rgba(0,0,0,.5);
	padding:10px 20px;
}
.wrap {
    height: calc(50vh - 40px);
    overflow: hidden;
    background: #fff;
    border-radius: 6px;
    padding: 10px 24px 14px;
    margin: 0 auto;
}
.wrap .title{
    font-size: 16px;
}
</style>